import React, { Component } from 'react';
import { Row, Col, Icon } from 'antd';
import './nav.css';
import { NavLink } from 'react-router-dom';
class NavChild extends Component {
    render() {
        return (
            <Col span={this.props.width} className="godz-nav-child">
                <NavLink to={this.props.data.link}>
                    <div className="godz-nav-icon">
                        <Icon type={this.props.data.icon} />
                    </div>
                    <div className="godz-nav-text">
                        {this.props.data.name}
                    </div>
                </NavLink>
            </Col>
        )
    }
}

class Nav extends Component {
    constructor(props) {
        super(props);
        this.state = {
            navList: props.pageList
        }
    }
    getNavChild() {
        let list = this.state.navList, childs = [];
        for (let i = 0, l = list.length; i < l; i++) {
            childs.push(<NavChild data={list[i]} key={i} width={24 / l} />);
        }
        return childs;
    }
    render() {
        return (
            <Row gutter={8} className="godz-nav">
                {this.getNavChild()}
            </Row>
        )
    }
}
export default Nav; 